<template>
	<!-- 举报 -->
	<view class="content">
		<!-- 举报类型 -->
		<view class="type">
			<span>举报类型</span>
			<view class="box">
				<view class="" v-for="item,index in reportTypeList" :key="index"
				 @click="itemClick(index)" :style="item.choose?'border:1rpx solid #08C8BD;color:#08C8BD':''">
					{{item.type}}
				</view>
			</view>
		</view>
		<!-- 举报内容 -->
		<view class="input">
			<span>举报内容</span>
			<textarea v-model="reportContent" :show-confirm-bar="false"
			placeholder="限30字以内" maxlength="30"
			placeholder-style="font-size:24rpx" :show-count="false"></textarea>
			<span>{{reportContent.length}}/30</span>
		</view>
		<!-- 添加图片 -->
		<view class="addImg">
			<span>添加图片(限3张)</span>
			<view class="img">
				<view class="img2" v-for="item,index in imgList" :key="index">
					<image :src="item" mode="scaleToFill"></image>
					<image id="del" @click="deleteImg(index)" 
					src="/static/img/close@2x.png" alt="" mode="scaleToFill"></image>
				</view>
				<image v-if="imgList.length<3" src="/static/img/message/addImg@2x.png" alt="" @click="uploadImg" mode="scaleToFill"></image>
			</view>
		</view>
		
		<button>确认举报</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reportTypeList:[{
					type:'低俗色情',
					choose:false,
				},{
					type:'垃圾广告',
					choose:false,
				},{
					type:'暴力恐怖',
					choose:false,
				},{
					type:'违法违规',
					choose:false,
				},{
					type:'谣言欺诈',
					choose:false,
				},{
					type:'其他问题',
					choose:false,
				}],
				
				reportContent:'',		//举报内容
				
				imgList:[],				//图片列表
			}
		},
		methods: {
			itemClick(index){
				this.reportTypeList[index].choose=!this.reportTypeList[index].choose
			},
			//上传图片
			uploadImg(){
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: res=> {
						console.log(res);
						if (res.tempFilePaths.length>=0&&res.tempFilePaths.length<=3&&this.imgList.length<=3) {
							this.imgList.push(...res.tempFilePaths);
						}else if(this.imgList.length>2){
							uni.showToast({
								title: '最多上传3张图片',
								duration: 1500,
								icon:"none"
							});
						}
					}
				});
			},
			//删除图片
			deleteImg(index){
				this.imgList.splice(index,1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 1px 0;
		background-color:#FFFFFF;
		
		.type{
			margin: 32rpx 0;
			
			>span{
				margin-left: 32rpx;
				padding-left: 10rpx;
				border-left: 4rpx solid #08C8BD;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			
			.box{
				
				display: flex;
				flex-wrap: wrap;
				>view{
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 32rpx 32rpx 0;
					border: 1rpx solid #F3F7F8;
					width: 180rpx;
					height: 96rpx;
					background: #F3F7F8;
					border-radius: 16rpx;
					
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
			}
			
		}
		
		.input{
			margin: 32rpx;
			
			>span:nth-of-type(1){
				padding-left: 10rpx;
				border-left: 4rpx solid #08C8BD;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			>textarea{
				margin-top: 20rpx;
				width: 622rpx;
				padding: 32rpx;
				height: 180rpx;
				background: #F3F7F8;
				border-radius: 16rpx;
			}
			>span:nth-of-type(2){
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
			}
		}
		
		.addImg{
			margin: 32rpx;
			
			>span{
				padding-left: 10rpx;
				border-left: 4rpx solid #08C8BD;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.img{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				image{
					width: 160rpx;
					height: 160rpx;
				}
				.img2{
					margin-right: 16rpx;
				}
				
				#del{
					width: 40rpx;
					height: 40rpx;
				}
				
			}
			
		}
		
		>button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			background: #08C8BD;
			border-radius: 8px 8px 8px 8px;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
	}
</style>
